$control-grid: (
  text-color: getCssVar(color, text, 0),
  bg-color: transparent,
  padding: 0,
  cell-padding: getCssVar(spacing, tight),
  selection-padding: getCssVar(spacing, base-loose),
);
$control-grid-header: (
  text-color: getCssVar(color, text, 2),
  cell-padding: getCssVar(control-grid, cell-padding),
  height: auto,
);

$control-grid-content: (
  text-color: getCssVar(control-grid, text-color),
  item-hover-bg-color: getCssVar(color, fill, 0),
  row-height: 48px,
);

$control-grid-page: (
  text-color: getCssVar(control-grid, text-color),
  height: 50px,
  padding: 0 getCssVar(spacing, base-tight),
);

@include b(control-grid) {
  @include set-component-css-var(control-grid, $control-grid);
  @include set-component-css-var(control-grid-header, $control-grid-header);
  @include set-component-css-var(control-grid-content, $control-grid-content);
  @include set-component-css-var(control-grid-page, $control-grid-page);

  width: 100%;
  height: 100%;
  padding: getCssVar(control-grid, padding);
  background-color: getCssVar(control-grid, bg-color);

  // 支持分页时高度调整
  @include when(enable-page) {
    @include e(table) {
      height: calc(100% - getCssVar(control-grid, page-height));
    }
  }

  // 分组的时候取消树表格的缩进
  @include when(enable-group) {
    .el-table__indent{
      display: none;
    }
  }

  @include e(table) {
    width: 100%;
    height: 100%;

    // 排序图标居中
    .caret-wrapper {
      gap: 3px;
      justify-content: center;
    }

    .sort-caret {
      position: initial;
    }

    // 清除element单元格的padding
    &.el-table .el-table__cell {
      padding: 0;
    }

    // 表格列头样式
    .el-table__header-wrapper {
      .cell {
        height: getCssVar(control-grid, header, height);
        padding: getCssVar(control-grid, header, cell-padding);
        color: getCssVar(control-grid, header, text-color);
        @include overflow-wrap;
      }

      .el-table-column--selection .cell {
        padding: getCssVar(control-grid, selection-padding);
      }

      // 修复表头换行排序图标错位问题
      .is-sortable.el-table__cell{
        .cell{
          display: flex;
          align-items: center;
          justify-content: getCssVar('grid-column','justify-content');
        }

      }
    }

    // 表格body样式
    .el-table__body-wrapper {
      color: getCssVar(control-grid, content, text-color);
      border-bottom: .1px solid getCssVar(color, border);

      // 设置最小行高，内容多了换行要把行高撑开。
      // 谷歌行高样式
      .el-table__row {
        height: getCssVar(control-grid, content, row-height);
        cursor: pointer;

        > td {
          height: 0;
        }
      }

      // 火狐行高兼容性处理
      @-moz-document url-prefix() {
        .el-table__row > td {
          height: 100%;
        }
      }

      // 单元格通用样式
      .cell {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0;
      }

      .el-table-column--selection .cell {
        padding: getCssVar(control-grid, selection-padding);
      }
    }

    // 表格列对齐样式
    .el-table__cell.is-center{
      #{getCssVarName('grid-column', 'text-align')}: center;
      #{getCssVarName('grid-column', 'justify-content')}: center;
    }
    
    .el-table__cell.is-left{
      #{getCssVarName('grid-column', 'text-align')}: left;
      #{getCssVarName('grid-column', 'justify-content')}: flex-start;
    }

    .el-table__cell.is-right{
      #{getCssVarName('grid-column', 'text-align')}: right;
      #{getCssVarName('grid-column', 'justify-content')}: flex-end;
    }

  }

  @include b(grid-page) {
    @include flex(row, flex-end);

    height:getCssVar(control-grid, page-height);
    padding: getCssVar(control-grid, page-padding);

    .el-pagination {
      overflow: auto;
    }
  }
}

